import React, {Component} from "react";

import qs from 'qs';            // React 18 换成了 qs, 张天禹老师讲的React版本是17.xx

const detailData = [
    {id: '01', content: '你好，中国'},
    {id: '02', content: '你好，西安'},
    {id: '03', content: '你好，武汉'}
]

export default class Detail extends Component {
    render() {
        console.log(this.props);
        // 从 props 中接收 params 参数
        //const {id, title } = this.props.match.params;

        // 接收search 参数
        // const {search} = this.props.location;
        // const {id, title} = qs.parse(search.slice(1));
        // const result = detailData.find((detailObj) => {
        //    return detailObj.id === id;
        // })

        // 接收state参数
        // 如果清空了浏览器历史记录，需要在后面加上 || {} , 防止取值为 undefined
        const {id, title} = this.props.location.state || {};
        const result = detailData.find((detailObj) => {
           return detailObj.id === id;
        }) || {}

        return (
            <ul>
                <li>ID: {id}</li>
                <li>Title: {title}</li>
                <li>Content: {result.content}</li>
            </ul>
        );
    }
}